<template>
	<a-drawer
		title="选择用户冻结"
		:width="600"
		:visible="visible"
		:destroy-on-close="true"
		:footer-style="{ textAlign: 'right' }"
		@close="onClose"
	>
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-row :gutter="24">
				<a-col :span="12">
					<a-form-item label="冻结类型：" name="deviceType">
						<a-select
							v-model:value="formData.deviceType"
							placeholder="请选择冻结类型"
							:options="deviceTypeOptions"
							@change="changeDeviceType"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item
						label="组柜："
						name="cabinetGroupId"
						v-if="
							formData.deviceType === 'CABINET_GROUP' ||
							formData.deviceType === 'CABINET_INFO' ||
							formData.deviceType === 'CABINET_DOOR'
						"
					>
						<a-select
							v-model:value="formData.cabinetGroupId"
							placeholder="请选择组柜"
							:options="cabinetGroupOptions"
							allow-clear
							@change="loadCabinetInfoList"
						/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="12">
					<a-form-item
						label="柜子："
						name="cabinetInfoId"
						v-if="formData.deviceType === 'CABINET_INFO' || formData.deviceType === 'CABINET_DOOR'"
					>
						<a-select
							v-model:value="formData.cabinetInfoId"
							placeholder="请选择柜子"
							:options="cabinetInfoOptions"
							allow-clear
							@change="loadCabinetDoorList"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="柜门：" name="cabinetDoorId" v-if="formData.deviceType === 'CABINET_DOOR'">
						<a-select
							v-model:value="formData.cabinetDoorId"
							placeholder="请选择柜门"
							:options="cabinetDoorOptions"
							allow-clear
						/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-form-item label="冻结天数：" name="frozenDays">
				<a-input-number
					v-model:value="formData.frozenDays"
					placeholder="请输入冻结天数"
					addon-after="天"
					:precision="0"
					:min="1"
					allow-clear
				/>
			</a-form-item>
			<a-form-item label="冻结原因：" name="frozenReason">
				<a-textarea v-model:value="formData.frozenReason" placeholder="请输入冻结原因" allow-clear />
			</a-form-item>
			<a-form-item label="用户：" name="userIds">
				<a-button type="link" @click="openSelector">选择</a-button>
				<a-tag v-for="item in userList" color="orange" :key="item.id">{{ item.name }}</a-tag>
				<a-input v-model:value.trim="formData.userIds" hidden></a-input>
			</a-form-item>
		</a-form>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
			<a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
		</template>
		<user-selector-plus
			ref="UserSelectorPlus"
			page-url="/biz/org/userSelector"
			org-url="/biz/org/orgTreeSelector"
			:radio-model="false"
			@onBack="userBack"
		/>
	</a-drawer>
</template>

<script setup name="bizCabinetPermissionBatchFreeUsers">
	import tool from '@/utils/tool'
	import { cloneDeep } from 'lodash-es'
	import { required } from '@/utils/formRules'
	import bizCabinetPermissionReagentApi from '@/api/biz/bizCabinetPermissionReagentApi'
	import userSelectorPlus from '@/components/Selector/userSelectorPlus.vue'
	import bizCabinetGroupReagentApi from '@/api/biz/bizCabinetGroupReagentApi'
	import bizCabinetInfoReagentApi from '@/api/biz/bizCabinetInfoReagentApi'
	import bizCabinetDoorReagentApi from '@/api/biz/bizCabinetDoorReagentApi'
	import { message } from 'ant-design-vue'
	// 抽屉状态
	const visible = ref(false)
	const emit = defineEmits({ successful: null })
	const formRef = ref()
	// 表单数据
	const formData = ref({})
	const submitLoading = ref(false)
	const deviceTypeOptions = ref([])
	const UserSelectorPlus = ref()

	const cabinetGroupOptions = ref([])
	const cabinetInfoOptions = ref([])
	const cabinetDoorOptions = ref([])

	let userList = ref([])

	// 打开抽屉
	const onOpen = () => {
		visible.value = true
		deviceTypeOptions.value = [
			{
				label: '组柜',
				value: 'CABINET_GROUP'
			},
			{
				label: '柜子',
				value: 'CABINET_INFO'
			},
			{
				label: '柜门',
				value: 'CABINET_DOOR'
			}
		]
	}
	// 关闭抽屉
	const onClose = () => {
		formRef.value.resetFields()
		formData.value = {}
		userList.value = []
		visible.value = false
	}
	// 默认要校验的
	const formRules = {
		deviceType: [required('请选择授权类型')],
		frozenDays: [required('请输入冻结天数')],
		frozenReason: [required('请输入冻结原因')],
		userIds: [required('请选择授权人员')],
		cabinetGroupId: [required('请选择组柜')]
	}
	// 验证并提交数据
	const onSubmit = () => {
		formRef.value.validate().then(() => {
			submitLoading.value = true
			const formDataParam = cloneDeep(formData.value)
			bizCabinetPermissionReagentApi
				.bizCabinetPermissionBatchFreezeUsers(formDataParam)
				.then(() => {
					onClose()
					message.success('批量选择用户冻结成功')
					emit('successful')
				})
				.finally(() => {
					submitLoading.value = false
				})
		})
	}
	// 打开人员选择器
	const openSelector = () => {
		let checkedUserIds = userList.value.map((item) => item.id)
		UserSelectorPlus.value.showUserPlusModal(checkedUserIds)
	}
	// 人员选择器回调
	const userBack = (value) => {
		userList.value = value
		formData.value.userIds = value.map((item) => item.id)
	}
	const changeDeviceType = () => {
		if (!formData.value.deviceType) return
		if (formData.value.deviceType === 'CABINET_GROUP') {
			delete formRules.cabinetInfoId
			delete formRules.cabinetDoorId
			formData.value.cabinetInfoId = null
			formData.value.cabinetDoorId = null
		}
		if (formData.value.deviceType === 'CABINET_INFO') {
			formRules.cabinetInfoId = [required('请选择柜子')]
			delete formRules.cabinetDoorId
			formData.value.cabinetDoorId = null
		}
		if (formData.value.deviceType === 'CABINET_DOOR') {
			formRules.cabinetInfoId = [required('请选择柜子')]
			formRules.cabinetDoorId = [required('请选择柜门')]
		}
		bizCabinetGroupReagentApi.bizCabinetGroupList({}).then((res) => {
			cabinetGroupOptions.value = res.map((item) => {
				return {
					label: `${item.cabinetGroupCode}-${item.cabinetGroupName}`,
					value: item.id
				}
			})
		})
	}
	const loadCabinetInfoList = (cabinetGroupId) => {
		formData.value.cabinetInfoId = null
		formData.value.cabinetDoorId = null
		cabinetDoorOptions.value = []
		bizCabinetInfoReagentApi
			.bizCabinetList({
				groupId: cabinetGroupId
			})
			.then((res) => {
				cabinetInfoOptions.value = res.map((item) => {
					return {
						label: `${item.cabinetCode}-${item.cabinetName}`,
						value: item.id
					}
				})
			})
	}
	const loadCabinetDoorList = (cabinetInfoId) => {
		formData.value.cabinetDoorId = null
		bizCabinetDoorReagentApi
			.bizCabinetDoorList({
				cabinetInfoId: cabinetInfoId
			})
			.then((res) => {
				cabinetDoorOptions.value = res.map((item) => {
					return {
						label: `${item.cabinetDoorCode}-${item.cabinetDoorName}`,
						value: item.id
					}
				})
			})
	}
	// 抛出函数
	defineExpose({
		onOpen
	})
</script>
